<template>
    <div>
        <el-row :gutter="24">
            <el-col :span="12">
                <div id="pie" class="chart"></div>
            </el-col>

        </el-row>
        <el-button type="primary" @click="add">新增</el-button>
        <!-- <div v-for="(item,index) in formData" :key="index">
            <div> 日期： <el-date-picker v-model="item.date" type="date" placeholder="选择日期" class="select">
                </el-date-picker>
            </div>
            <div>金额：<el-input v-model="item.money"></el-input>
            </div>

            <div>备注： <el-input v-model="item.remark"></el-input>
            </div>
           
        </div> -->
        <el-form ref="addForm" :model="ruleForm"  label-width="auto" width="20%">
            <div v-for="(item,index) in formData" :key="index">
                <el-form-item label="日期" prop="date">
                    <el-date-picker v-model="item.date" type="date" placeholder="选择日期" class="select">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="金额" prop="money">
                    <el-input v-model="item.money"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="item.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="del(index)">删除</el-button>
                </el-form-item>
            </div>
        </el-form>

      

    </div>
</template>
<script>
import Util from '../../../src/assets/js/util';
export default {
    data() {
        return {
            ruleForm: {
                formData: []
            },
            formData: [
                { date: '', money: '', remark: '' }
            ]
        }
    },
    computed: {
        chartPie() {
            return this.$echarts.init(Util.getDom("pie"));
        },

    },
    methods: {
        getEcharts() {
            this.chartPie.setOption({

                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        center: ["50%", "50%"],
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 400,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })




        },

        add() {
            this.formData.push({
                date: '', money: '', remark: ''
            })
        },
        del(index) {

            this.formData.splice(index, 1)
        },
        submit() {
            this.ruleForm.formData = this.formData
        }

    },
    mounted() {
        this.getEcharts()
    }
}
</script>
<style scoped lang="less">
.el-row {
  margin-top: 20px;
}
.chart {
  width: 100%;
  height: 330px;
  // .border-radius(8px);
  background-color: #f5f5f5;
  box-shadow: 0 0 5px transparent;
  padding:15px 0 0 15px;
  &:hover {
    box-shadow: 0 0 5px #2EB3FF;
  }
}
</style>
